<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://static.talkyun.com/frame/layui/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="https://static.talkyun.com/frame/layui/style/skin/default.css" media="all">
    <link rel="stylesheet" href="../css/style.css" media="all">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/api.js"></script>
    <script src="index.js"></script>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>广告详情管理</legend>
    </fieldset>

    <table class="layui-hide" id="test" lay-filter="testevent"></table>

    <!--    模板scripty-->
    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

    <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addItem">添加广告</button>
    </div>
</script>


    <!--    弹出窗的模板-->
    <script type="text/html" id="argSchemaTemplate">
            <form class="layui-form" action="">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>添加广告</legend>
                </fieldset>

                <div class="layui-input-block" hidden>
                    <input class="layui-input" type="text" hidden name="id"  value="{{d.id}}" autocomplete="off" placeholder="请输入id" />
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">广告标题</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text" lay-verify="required"  name="title"  value="{{d.title}}" autocomplete="off" placeholder="请输入标题" />
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">发布状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="上线" title="上线" {{d.status ==="上线" ?'checked':''}}>
                        <input type="radio" name="status" value="下线" title="下线" {{d.status ==="下线" ?'checked':''}}>
                    </div>
                </div>

                <div class="layui-upload">
                    <label class="layui-form-label"></label>
                    <button type="button" class="layui-btn" id="uploadId">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="uploadImgId" src="{{d.url}}">
                        <p id="demoText"></p>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="startDate" id="test6" placeholder=" - " value="{{d.startDate}} - {{d.endDate}}">
                            <p>开始时间:{{d.startDate}} - 结束时间:{{d.endDate}}</p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">位置</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text"  name="position"  value="{{d.position}}" autocomplete="off" placeholder="请输入位置" />
                    </div>
                </div>

                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">平台</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text"  name="platform"  value="{{d.platform}}" autocomplete="off" placeholder="请输入平台" />
                    </div>
                </div> -->


                <div class="layui-form-item">
                    <label class="layui-form-label">访问链接</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text"  id="picUrl"  name="url"  value="{{d.url}}" autocomplete="off" placeholder="请输入访问链接" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">访问网站链接</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text"  id="weburl"  name="weburl"  value="{{d.weburl}}" autocomplete="off" placeholder="请输入访问链接" />
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitadvertmanager">提交</button>
                </div>
            </form>

</script>
    <script type="text/html" id="PicurlTpl">
    <img class="layui-upload-img" id="uploadImgId21" src="{{d.url}}">
</script>
    <script type="text/javascript">
        layuiModules = ['table', 'form', 'laydate', 'admin', 'upload'];

        function mounted() {
            var form = layui.form
                , layer = layui.layer
                , laydate = layui.laydate;
            var table = layui.table;
            var $ = layui.$;
            var api = layui.api;
            var admin = layui.admin;
            var upload = layui.upload;

            var schoolId = layui.data('qw_advert_id').adId;

            var where = {
                pageNo: 1,
                pageSize: 10,
                schoolId: schoolId ? schoolId : -1
            };

            table.render({
                elem: '#test'
                , url: api.advertDetail.all
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                , page: false
                , contentType: "application/json"
                , parseData: function (res) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": res.data.totalSize,
                        "data": res.data.result
                    }
                }
                , done: function (res, curr, count) {
                    loadPage(curr, count);
                }
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'title', width: 120, title: '广告标题' }
                    , { field: 'url', title: '图片预览', width: 120, templet: '#PicurlTpl' }
                    , { field: 'status', width: 120, title: '状态' }
                    , { field: 'startDate', title: '上线时间', width: 120 }
                    , { field: 'position', width: 120, title: '位置' }
                    , { field: 'url', title: '链接', width: 120 }
                    , { field: 'platform', title: '平台', width: 120 }
                    , { field: 'weburl', title: '访问网址', width: 120 }
                    , { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }
                ]]
                , where: where

            });

            function timestampToTime(timestamp) {
                var date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

                strDate = Y + M + D + h + m + s;
                return strDate;

            }

            form.render();

            // 后台接口分页参数不按Layui文档，自定义分页
            var repeat = [0, 0];
            function loadPage(curr, count) {
                if (repeat[0] == curr && repeat[1] == count) {
                    return false;
                }
                repeat[0] = curr;
                repeat[1] = count;
                layui.laypage.render({
                    elem: 'paging',
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    count: count,  //总数
                    limit: 10,   //每页显示的条数
                    skip: 1,
                    limits: [10, 20, 30, 40],
                    jump: function (obj) {
                        where.pageNo = obj.curr;
                        where.pageSize = obj.limit;
                        layui.table.reload('test', { where: where });
                        return false;
                    }
                });
            }

            //监听提交
            form.on('submit(submitadvertmanager)', function (data) {

                if (data.field.id && data.field.id != 'undefined' && data.field.id != '') {
                    updateItem(data);
                } else {
                    addItem(data);
                }

                return false;
            });

            //监听头工具栏事件
            table.on('toolbar(testevent)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'addItem':
                        openlayer({
                            platform: "",
                            position: "",
                            status: "",
                            statusType: "",
                            title: "",
                            url: "",
                            startDate: "",
                            endDate: "",
                            weburl: ""
                        });
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(testevent)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令

                        admin.req({
                            url: `${api.advertDetail.delete}?id=${obj.data.id}`,
                            contentType: 'application/x-www-form-urlencoded',
                            async: false,
                            success: function (res) {
                                layer.msg('删除成功');
                            }
                        });
                    });
                } else if (layEvent === 'edit') {
                    layer.msg('编辑操作');
                    openlayer(data)
                }
            });

            //新增和编辑同一个  试一试
            function addItem(data) {
                var split = data.field.startDate.split(" ");
                data.field.startDate = split[0];
                data.field.endDate = split[2];
                data.field.adId = schoolId;
                admin.req({
                    url: api.advertDetail.add,
                    data: data.field,
                    async: false,
                    success: function (res) {
                        layer.msg('新增成功');
                        layer.closeAll();
                        table.reload('test', { where: where });
                    }
                });
            }

            function updateItem(data) {
                var split = data.field.startDate.split(" ");
                data.field.startDate = split[0];
                data.field.endDate = split[2];
                data.field.adId = schoolId;
                admin.req({
                    url: api.advertDetail.update,
                    data: data.field,
                    async: false,
                    success: function (res) {
                        layer.msg('修改成功');
                        layer.closeAll();
                        table.reload('test', { where: where });
                    }
                });
            }

            function openlayer(data) {
                var templet = $('#argSchemaTemplate').html();

                layui.laytpl(templet).render(data, function (html) {
                    //layer 弹出窗
                    //在这里面输入任何合法的js语句
                    layer.open({
                        type: 1 //Page层类型
                        , area: ['50%', '70%']
                        , title: ''
                        , maxmin: false //允许全屏最小化
                        , anim: -1 //0-6的动画形式，-1不开启
                        , content: html,
                        success: function (layero, index) {

                            //普通图片上传
                            var uploadInst = upload.render({
                                elem: '#uploadId'
                                , url: api.advertDetail.upload //改成您自己的上传接口
                                , before: function (obj) {
                                    //预读本地文件示例，不支持ie8
                                    obj.preview(function (index, file, result) {
                                        $('#uploadImgId').attr('src', result); //图片链接（base64）
                                    });
                                }
                                , done: function (res) {
                                    //如果上传失败
                                    if (res.code > 0) {
                                        return layer.msg('上传失败');
                                    }
                                    //上传成功
                                    $('#picUrl').val(res.data);
                                }
                                , error: function () {
                                    //演示失败状态，并实现重传
                                    var demoText = $('#demoText');
                                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                    demoText.find('.demo-reload').on('click', function () {
                                        uploadInst.upload();
                                    });
                                }
                            });

                            // $.ajax({
                            //     type: 'POST',
                            //     url: "http://94.191.109.74:8081/advert/all",
                            //     headers: {
                            //         "Content-Type": "application/json"
                            //     },
                            //     data: JSON.stringify({"pageNo":1,"pageSize":10}),
                            //     success: function (res) {
                            //
                            //     },
                            // });
                            //日期范围
                            laydate.render({
                                elem: '#test6'
                                , range: true
                                , done: function (value, date, endDate) {
                                    console.log(value); //得到日期生成的值，如：2017-08-18
                                    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                                    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                                    $('#test6').val(date.year + "-" + date.month + "-" + date.date);
                                    $('#endDate').val(endDate.year + "-" + endDate.month + "-" + endDate.date);
                                }
                            });

                            form.render();
                        }
                    });
                });
            }
        };
    </script>
</body>

</html>